<!-- 配送区域管理 -->
<template>
  <div class="mod-menu main-container">
    <!-- 表格 -->
    <div class="table-con sys-menu-table">
      <el-table
        :data="dataList"
        header-cell-class-name="table-header"
        style="width: 100%"
        row-key="id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column prop="name" width="260" :label="$t('publics.name')">
        </el-table-column>
        <el-table-column align="center" :label="$t('product.deliveryArea')">
          <template slot-scope="scope">
            <div v-if="scope.row.canEdit && canEditControls(scope.row.name)">
              <el-cascader
                size="mini"
                style="width: 280px"
                v-model="scope.row.addressIds"
                ref="CascaderShopLocation"
                :options="dataList"
                :props="shopLocationProps"
                @change="handleShopLocationChange($event, scope.row)"
              >
              </el-cascader>
            </div>
            <div v-else>
              <p v-html="formatArr(scope.row)"></p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="150"
          :label="$t('sys.operation')"
        >
          <template slot-scope="scope">
            <div class="text-btn-con">
              <div
                v-if="!scope.row.canEdit && canEditControls(scope.row.name)"
                class="default-btn text-btn"
                @click="editDateHandle(scope.row)"
              >
                {{ $t("user.editBtn") }}
              </div>
              <div
                class="default-btn text-btn"
                v-if="scope.row.canEdit && canEditControls(scope.row.name)"
                @click="updateRowDateHandle(scope.row)"
              >
                {{ $t("sys.affirm") }}
              </div>
              <div
                class="default-btn text-btn"
                style="color: #999"
                v-if="scope.row.canEdit && canEditControls(scope.row.name)"
                @click="editDateHandle(scope.row, false)"
              >
                {{ $t("crud.cancelBtn") }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { deepCopy, processTreeData } from "@/utils";
export default {
  data() {
    return {
      dataList: [],
      dataListLoading: false,
      userDeliveryAddressAddOrUpdate: false,
      shopLocationProps: {
        label: "name",
        value: "id",
        multiple: true,
      },
    };
  },
  components: {},
  computed: {
    canEditControls() {
      return (name) => {
        let canListName = ["国内", "国际", "安检区外", "交通中心"];
        return canListName.indexOf(name) !== -1;
      };
    },
    formatArr() {
      return (val) => {
        if (!val.airportAddressList) return;
        let arr = JSON.parse(val.airportAddressList);
        val._airportAddressList = arr;
        return arr
          .map((m) => {
            if (m.addressNames && m.addressNames.length) {
              return m.addressNames.join("-") + "<br>";
            } else {
              return "";
            }
          })
          .join(" ")
          .toString();
      };
    },
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(
          "/airportStationAssociation/selectAirportStationAssociation"
        ),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        data.forEach((node) => {
          processTreeData(node);
        });
        this.dataList = data;
        this.dataListLoading = false;
      });
    },
    editDateHandle(row, canEdit = true) {
      if (canEdit) {
        let addressIds = [];
        if (row._airportAddressList && row._airportAddressList.length) {
          row._airportAddressList.forEach((m) => {
            addressIds.push(m.addressIds);
          });
        } else {
          addressIds = null;
        }
        this.$set(row, "addressIds", addressIds);
        row._oldRow = deepCopy(row);
      } else {
        Object.keys(row._oldRow).forEach((key) => {
          this.$set(row, key, row._oldRow[key]);
        });
      }
      this.$set(row, "canEdit", canEdit);
    },
    updateRowDateHandle(row) {
      row.stationShopId = row.id;
      this.$http({
        url: this.$http.adornUrl("/airportStationAssociation/save"),
        method: "post",
        data: this.$http.adornData(row),
      }).then(({ code }) => {
        if (code == "00000") {
          this.$set(row, "canEdit", false);
          this.$message({
            message: this.$i18n.t("publics.operation"),
            type: "success",
            duration: 1500,
          });
          // this.getDataList();
          row.airportAddressList = JSON.stringify(Object.values(row.station));
        }
      });
    },
    handleShopLocationChange(e, row) {
      this.$nextTick(() => {
        let nodes = this.$refs.CascaderShopLocation.getCheckedNodes(true);
        console.log(e, nodes);
        let station = {};
        nodes.forEach((f_node) => {
          f_node._pathIds = f_node.pathNodes.map((m) => m.value);
          station[f_node.value] = {
            addressIds: f_node._pathIds,
            addressNames: f_node.pathLabels,
          };
        });
        this.$set(row, "station", e.length ? station : {});
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mod-menu.main-container {
  padding-top: 0;
}
</style>
